---
import MainLayout from '../layouts/MainLayout.astro'
import FeatureSection from '$components/Sections/FeatureSection.astro'
import Code from '$components/Code/Code.astro'
import HeroWrapper from '$components/Hero/HeroWrapper.svelte'

// examples
import ScaleExampleRaw from '$components/Intro/ScaleExample.txt?raw'
import RapierExampleRaw from '$components/Intro/RapierExample.txt?raw'
import ExtrasExampleRaw from '$components/Intro/ExtrasExample.txt?raw'
import PluginsExample from '$components/Intro/PluginsExample.txt?raw'

import Button from '$components/Button/Button.astro'
import Testimonials from '$components/Testimonials/Testimonials.astro'
---

<MainLayout title="Welcome to Threlte.">
  <HeroWrapper client:load />

  <div class="flex flex-col gap-14 py-24">
    <div class="flex flex-col items-center gap-4">
      <div class="text-faded flex-1 text-center text-2xl font-light">
        A 3D framework for the web.<br />
        Built on top of
        <span class="text-orange font-bold">Svelte</span>
        and
        <span class="text-orange font-bold">Three.js</span>.
      </div>

      <div
        class="flex flex-row items-center justify-center gap-4 rounded-full border border-white/20 bg-white/5 px-2 py-2 shadow-xl"
      >
        <!-- Svelte Logo -->
        <div class="flex h-14 w-14 items-center justify-center rounded-full bg-white">
          <svg
            class="w-[55%]"
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 98.1 118"
            style="enable-background:new 0 0 98.1 118;"
            xml:space="preserve"
          >
            <style type="text/css">
              .st0 {
                fill: #ff3e00;
              }
              .st1 {
                fill: #ffffff;
              }
            </style>
            <path
              class="st0"
              d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"
            ></path>
            <path
              class="st1"
              d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72
c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5
c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1
c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1
c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9"
            ></path>
          </svg>
        </div>

        <!-- Three.js Logo -->
        <div class="flex h-14 w-14 items-center justify-center rounded-full bg-white">
          <svg
            class="w-[75%] translate-x-[5%]"
            fill="none"
            stroke-linecap="square"
            stroke-miterlimit="10"
            version="1.1"
            viewBox="0 0 226.77 226.77"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g
              transform="translate(8.964 4.2527)"
              fill-rule="evenodd"
              stroke="#000"
              stroke-linecap="butt"
              stroke-linejoin="round"
              stroke-width="4"
            >
              <path d="m63.02 200.61-43.213-174.94 173.23 49.874z"></path>
              <path d="m106.39 50.612 21.591 87.496-86.567-24.945z"></path>
              <path d="m84.91 125.03-10.724-43.465 43.008 12.346z"></path>
              <path d="m63.458 38.153 10.724 43.465-43.008-12.346z"></path>
              <path d="m149.47 62.93 10.724 43.465-43.008-12.346z"></path>
              <path d="m84.915 125.06 10.724 43.465-43.008-12.346z"></path>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <!-- Declarative Scaling -->
  <FeatureSection color="blue">
    <svg
      slot="icon"
      viewBox="0 0 33 33"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        opacity="0.4"
        d="M27.4886 5.80411H20.4886V26.8041H27.4886V5.80411Z"
        fill="white"
      ></path>
      <path
        d="M29.4886 26.8041H4.48856"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
      <path
        d="M13.4886 26.8041V11.8041H20.4886"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
      <path
        d="M27.4886 5.80411H20.4886V26.8041H27.4886V5.80411Z"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
      <path
        d="M6.48856 26.8041V17.8041H13.4886"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>

    <Fragment slot="subline">Declarative Components</Fragment>

    <Fragment slot="headline">Scale with ease.</Fragment>

    <Fragment slot="body-left">
      Threlte lets you use every feature of Three.js in a declarative way. Compose your scene with
      Threlte's <span class="text-highlight">render components</span> and let Threlte handle the rest.<br
      />

      Leverage the <span class="text-highlight">lifecycle</span> of Svelte components to subscribe to
      events, handle state changes and more.

      <Button
        class="mt-8"
        href="/docs/learn/getting-started/your-first-scene"
        color="blue"
      >
        Make Your First Scene
      </Button>
    </Fragment>

    <Fragment slot="body-right">
      <Code
        code={ScaleExampleRaw}
        lang="svelte"
      />
    </Fragment>
  </FeatureSection>

  <!-- Features, Ecosystem -->
  <FeatureSection class="border-t-0">
    <svg
      slot="icon"
      viewBox="0 0 33 33"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        opacity="0.2"
        d="M27.9886 23.8041V9.80411C27.9886 8.69954 27.0931 7.80411 25.9886 7.80411L6.98856 7.80411C5.88399 7.80411 4.98856 8.69954 4.98856 9.80411V23.8041C4.98856 24.9087 5.88399 25.8041 6.98856 25.8041H25.9886C27.0931 25.8041 27.9886 24.9087 27.9886 23.8041Z"
        fill="white"
      ></path>
      <path
        d="M31.9886 12.8041V20.8041"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
      <path
        d="M27.9886 23.8041V9.80411C27.9886 8.69954 27.0931 7.80411 25.9886 7.80411L6.98856 7.80411C5.88399 7.80411 4.98856 8.69954 4.98856 9.80411V23.8041C4.98856 24.9087 5.88399 25.8041 6.98856 25.8041H25.9886C27.0931 25.8041 27.9886 24.9087 27.9886 23.8041Z"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
      <path
        d="M16.4886 21.8041L18.4886 16.8041H14.4886L16.4886 11.8041"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>

    <Fragment slot="subline">Community driven</Fragment>

    <Fragment slot="headline">Batteries included.</Fragment>

    <Fragment slot="body-left">
      Threlte comes with integrations for <a
        class="text-highlight"
        href="https://rapier.rs/"
        >Rapier</a
      >, a best-in-class physics engine, <a
        class="text-highlight"
        href="https://www.theatrejs.com/"
        >Theatre.js</a
      >, an animation library with a professional motion design toolset and <code
        >@threlte/gltf</code
      >, a tool to transform GLTF files into Threlte components.<br /><br />

      On top of that <code>@threlte/extras</code> provides a collection of useful components and utilities
      to get you started.

      <Button
        class="mt-8"
        href="/docs/reference/extras/getting-started"
        color="orange"
      >
        Documentation
      </Button>
    </Fragment>

    <Fragment slot="body-right">
      <div class="flex flex-col gap-6">
        <div>
          <Code
            title="@threlte/rapier"
            code={RapierExampleRaw}
            lang="svelte"
          />
        </div>

        <div>
          <Code
            title="@threlte/extras"
            code={ExtrasExampleRaw}
            lang="svelte"
          />
        </div>
      </div>
    </Fragment>
  </FeatureSection>

  <!-- Extendable -->
  <FeatureSection
    class="border-t-0"
    color="green"
  >
    <svg
      slot="icon"
      viewBox="0 0 32 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        opacity="0.2"
        d="M8 27C7.73478 27 7.48043 26.8946 7.29289 26.7071C7.10535 26.5196 7 26.2652 7 26V20.6625C6.45139 20.9242 5.84337 21.0363 5.2375 20.9875C4.72449 20.9498 4.2261 20.7995 3.77779 20.5473C3.32948 20.2951 2.94228 19.9471 2.64374 19.5282C2.3452 19.1093 2.14266 18.6298 2.05055 18.1237C1.95843 17.6176 1.97899 17.0975 2.11077 16.6002C2.24256 16.103 2.48232 15.6409 2.813 15.2469C3.14367 14.8529 3.55714 14.5366 4.02396 14.3206C4.49078 14.1045 4.99948 13.994 5.51387 13.997C6.02825 13.9999 6.53566 14.1162 7 14.3375V9C7 8.73478 7.10535 8.48043 7.29289 8.29289C7.48043 8.10536 7.73478 8 8 8H13.8375C13.5758 7.45139 13.4637 6.84337 13.5125 6.2375C13.5502 5.72449 13.7005 5.2261 13.9527 4.77779C14.2049 4.32948 14.5529 3.94228 14.9718 3.64374C15.3907 3.3452 15.8702 3.14267 16.3763 3.05055C16.8824 2.95843 17.4025 2.979 17.8998 3.11078C18.397 3.24256 18.859 3.48232 19.2531 3.813C19.6471 4.14368 19.9634 4.55714 20.1794 5.02396C20.3955 5.49078 20.506 5.99949 20.503 6.51387C20.5001 7.02825 20.3838 7.53567 20.1625 8H26C26.2652 8 26.5196 8.10536 26.7071 8.29289C26.8946 8.48043 27 8.73478 27 9V14.3375C26.4514 14.0758 25.8434 13.9637 25.2375 14.0125C24.7245 14.0502 24.2261 14.2005 23.7778 14.4527C23.3295 14.705 22.9423 15.0529 22.6437 15.4718C22.3452 15.8907 22.1427 16.3702 22.0505 16.8763C21.9584 17.3824 21.979 17.9025 22.1108 18.3998C22.2426 18.897 22.4823 19.3591 22.813 19.7531C23.1437 20.1471 23.5571 20.4634 24.024 20.6794C24.4908 20.8955 24.9995 21.006 25.5139 21.003C26.0282 21.0001 26.5357 20.8838 27 20.6625V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H8Z"
        fill="white"
      ></path>
      <path
        d="M8 27C7.73478 27 7.48043 26.8946 7.29289 26.7071C7.10535 26.5196 7 26.2652 7 26V20.6625C6.45139 20.9242 5.84337 21.0363 5.2375 20.9875C4.72449 20.9498 4.2261 20.7995 3.77779 20.5473C3.32948 20.2951 2.94228 19.9471 2.64374 19.5282C2.3452 19.1093 2.14266 18.6298 2.05055 18.1237C1.95843 17.6176 1.97899 17.0975 2.11077 16.6002C2.24256 16.103 2.48232 15.6409 2.813 15.2469C3.14367 14.8529 3.55714 14.5366 4.02396 14.3206C4.49078 14.1045 4.99948 13.994 5.51387 13.997C6.02825 13.9999 6.53566 14.1162 7 14.3375V9C7 8.73478 7.10535 8.48043 7.29289 8.29289C7.48043 8.10536 7.73478 8 8 8H13.8375C13.5758 7.45139 13.4637 6.84337 13.5125 6.2375C13.5502 5.72449 13.7005 5.2261 13.9527 4.77779C14.2049 4.32948 14.5529 3.94228 14.9718 3.64374C15.3907 3.3452 15.8702 3.14267 16.3763 3.05055C16.8824 2.95843 17.4025 2.979 17.8998 3.11078C18.397 3.24256 18.859 3.48232 19.2531 3.813C19.6471 4.14368 19.9634 4.55714 20.1794 5.02396C20.3955 5.49078 20.506 5.99949 20.503 6.51387C20.5001 7.02825 20.3838 7.53567 20.1625 8H26C26.2652 8 26.5196 8.10536 26.7071 8.29289C26.8946 8.48043 27 8.73478 27 9V14.3375C26.4514 14.0758 25.8434 13.9637 25.2375 14.0125C24.7245 14.0502 24.2261 14.2005 23.7778 14.4527C23.3295 14.705 22.9423 15.0529 22.6437 15.4718C22.3452 15.8907 22.1427 16.3702 22.0505 16.8763C21.9584 17.3824 21.979 17.9025 22.1108 18.3998C22.2426 18.897 22.4823 19.3591 22.813 19.7531C23.1437 20.1471 23.5571 20.4634 24.024 20.6794C24.4908 20.8955 24.9995 21.006 25.5139 21.003C26.0282 21.0001 26.5357 20.8838 27 20.6625V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H8Z"
        stroke="white"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      ></path>
    </svg>

    <Fragment slot="subline">Plugins</Fragment>

    <Fragment slot="headline">Fill the gap.</Fragment>

    <Fragment slot="body-left">
      A single component is at the core of Threlte: <code>{'<'}T{'>'}</code>. But sometimes you need
      more. Add custom props and custom events to <code>{'<'}T{'>'}</code> with type-safe <i
        >Plugins</i
      >
      that can hook into every aspect of Threlte's render component.

      <Button
        class="mt-8"
        href="/docs/learn/advanced/plugins"
        color="green"
      >
        Documentation
      </Button>
    </Fragment>

    <Fragment slot="body-right">
      <Code
        title="look-at-plugin.ts"
        code={PluginsExample}
        lang="ts"
      />
    </Fragment>
  </FeatureSection>

  <FeatureSection
    color="blue"
    class="border-b-0 border-t-0"
  >
    <Fragment slot="subline">Start your Journey</Fragment>

    <Fragment slot="headline">Don't take our word for it.</Fragment>

    <div
      slot="body"
      class="flex w-full flex-col items-center"
    >
      <div>
        <Testimonials class="mb-12 w-full" />
      </div>

      <Button
        color="orange"
        href="/docs/learn/getting-started/introduction"
        class="glow-orange"
      >
        Getting Started
      </Button>
    </div>
  </FeatureSection>

  <div class="my-12 flex flex-col items-center justify-center">
    <h2 class="text-glow-white mb-8 text-center text-5xl font-bold">Join the Threlte Community.</h2>

    <Button
      color="blue"
      href="https://discord.gg/EqUBCfCaGm"
    >
      <svg
        class="w-10"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 127.14 96.36"
      >
        <g data-name="图层 2">
          <g data-name="Discord Logos">
            <path
              d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z"
              fill="#fff"
              data-name="Discord Logo - Large - White"
            ></path>
          </g>
        </g>
      </svg>
      Discord
    </Button>
  </div>
</MainLayout>
